<!--语义化，定义这个文件为html文件-->
<!DOCTYPE html>
<html lang="en">
<!--   这里不用显示在页面只是用于关键字，提示，跳转等等-->
<head>

    <!-- 定义编码格式   -->
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="icon" href="../img/logo_g0yv.jpg" type="img/x-ico">
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/common.css">

    <!--    显示公司logo-->
</head>
<!--就是浏览器的宽度-->
<!--可是宽度和浏览器宽度不一样-->
<body>
<!--整个页面都是通过容器来定义div-->
<!--tab键 q键盘左边的按键-->
<!--我们想知道div有多大,可以给当前div设置一个背景颜色-->
<!--在css里面怎么拿到div，可以通过什么方式来拿？
选择器：元素选择器,元素也叫标签
伪元素
所以，以后少用元素选择器：而改为类选择器
类选择器可以精准的拿到某个div
-->
<!--<div>-->
<!--    <div class="a">啊啊啊</div>-->
<!--    <div class="b">bbbbb</div>-->

<!--    <div class="c">c</div>-->
<!--</div>-->
<div>
    <div id="top"></div>

    <div class="middle">
        <div>
            <div>
                <div class="title">较新动态</div>
                <!--    border-top是公共的css ，这里需要单独在创建一个自己的css样式，所以需要在有一个类名            -->
                <div class="border-top news">
                    <div><img src="../img/m331.jpg" width="268" height="190"></div>
                    <div>
                        <div>
                            <div class="font-title single-over">日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                            <div class="font-content single-over">日本较大的抹茶餐饮连锁正式登陆上海,其中
                            </div>
                        </div>
                        <div>
                            <div class="font-title single-over">日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                            <div class="font-content single-over">日本较大的抹茶餐饮连锁正式登陆上海,其中
                            </div>
                        </div>
                        <div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                            <div class="font-content single-over">日本较大的抹茶餐饮连锁正式登陆上海,其中
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">产品展示</div>
                <div class="border-top product">
                    <div>
                        <div><img src="../img/duojiaoouding.jpg"></div>
                        <div class="font-title single-over">剁椒藕丁</div>
                        <div class="font-content single-over">原料：多交，藕丁，油盐多交，藕丁，油盐多交，藕丁，油盐多交，藕丁，油盐多交，藕丁，油盐</div>
                    </div>
                    <div>
                        <div><img src="../img/duojiaoouding.jpg"></div>
                        <div class="font-title single-over">剁椒藕丁剁椒藕丁剁椒藕丁剁椒藕丁剁椒藕丁剁椒藕丁</div>
                        <div class="font-content single-over">原料：多交，藕丁，油盐多交，藕丁，油盐多交，藕丁，油盐多交，藕丁，油盐多交，藕丁，油盐</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div id="foot"></div>
</div>

</body>
</html>